<script setup lang="ts">
import { ref } from 'vue'

const props = defineProps({
  proItem: {
    type: Object,
    default: {}
  },
  proIndex: {
    type: [Number, String],
    default: 0,
  },
})

const open = ref(props.proIndex == 0 ? true : false)
const openClose = () => {
  open.value = !open.value
}
</script>

<template>
  <view class="pro">
    <view class="pro-tlt">
      <view class="fs30 c1 fw400">{{proItem.repairItem}}</view>
      <view class="pro-open" @click="openClose">
        <text class="fs28 fw400 c3 open-button">{{ open ? '收起' : '展开' }}</text>
        <ve-icon v-if="open" name="arrow_top_1" size="28" />
        <ve-icon v-else name="arrow_bottom_1" size="28" />
      </view>
    </view>
    <view class="pro-msg" v-if="open">
      <ve-cell label="品牌">{{ proItem.maker || '-' }}</ve-cell>
      <ve-cell-price label="单价" :value="proItem.partPrice"></ve-cell-price>
      <ve-cell label="数量">{{ proItem.num || '-' }}</ve-cell>
      <ve-cell-price label="总价" :value="proItem.price"></ve-cell-price>
      <ve-cell label="备注">{{ proItem.remark || '-' }}</ve-cell>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.pro {
  .pro-tlt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80rpx;
    .pro-open {
      .open-button {
        margin-right: 12rpx;
      }
    }
  }
  .pro-msg {
    width: 100%;
    padding: 12rpx 24rpx 0;
    background: #eff0f2;
    .pro-item {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding-bottom: 32rpx;
      .pro-brand {
        width: 180rpx;
      }
      .pro-brand-name {
        flex: 1;
        margin-left: 20rpx;
      }
    }
  }
}
</style>
